<template>
	<view>
		<tn-nav-bar :isBack='true' :backTitle='" "' bottomShadow :alpha="alpha">邀请好友
		</tn-nav-bar>

		<image src="/static/product/topbg.png" class="topbg" mode=""></image>
		<loading v-if="loading"></loading>
		<view :style="{paddingTop:'calc('+vuex_custom_bar_height+'px + 30rpx)'}" class="con" v-else>
			<!-- <view class="con__box" v-for="(item,index) in list" :key="index">
				<image :src="URL(item.image)" class="con__box__bg" mode=""></image>
				<image :src="codeUrl" class="qrbox" mode=""></image>

			</view> -->
			<u-swiper height="1200rpx" :list="list" previousMargin="30rpx" keyName="image" imgMode='widhtFix' circular
				nextMargin="30rpx" circular :autoplay="false" radius="5" bgColor="transparent"
				@change='e => curpoter = e.current' :current="curpoter" indicator indicatorActiveColor='#286cd7'
				indicatorInactiveColor='rgba(38, 106, 214,.5)'></u-swiper>
			<view class="footer">
				<view class="footer__item" @click="clickbtn(item)" v-for="(item,index) in footerlist" :key="index"
					:class='"item"+index' hover-class="tn-hover">
					{{item.name}}
				</view>
			</view>
			<!-- <button type="default" @click="exportPost">生成海报</button> -->
		</view>
		<canvas canvas-id="shareCanvas" class="canvas" bindlongpress="saveImg" catchtouchmove="true"
			:style="{height: canvasHeight+'rpx',width:canvasWidth+'rpx'}" style="position: fixed;right: 2000%;">
		</canvas>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/api/config';
	import user from '@/api/_user.js'
	export default {
		data() {

			return {
				alpha: true,
				url: 'https://mm.fuliaoxx.com?salt=' + this.$store.state.vuex_userinfo.salt, // 要生成的二维码值
				footerlist: [{
						name: '链接分享',
						met: 'link'
					},
					{
						name: '保存二维码',
						met: 'exportPost'
					},
					{
						name: '分享好友',
						met: 'fenxiang'
					},
				],
				qrcode_id: 'qrcode_id',
				codeUrl: '',
				page_data: {
					post_img: '',
					codePng: null
				},
				ctx: null,
				windowObj: {},
				canvasHeight: 0,
				canvasWidth: 0,
				list: [],
				loading: true,
				curpoter: 0
			};
		},
		onReady() {
			//初始化画布
			this.ctx = wx.createCanvasContext('shareCanvas')
		},
		onLoad() {
			let that = this

			// 背景 
			user.makeWechatCode({
				id: this.$store.state.vuex_userinfo.id
			}).then(res1 => {
				if (res1.data.code == 1) {
					this.page_data.codePng = BASE_URL + '/' + res1.data.data.codeUrl
					this.codeUrl = BASE_URL + '/' + res1.data.data.codeUrl
					user.poster().then(res => {
						if (res.data.code == 1) {
							res.data.data.map(t => {
								this.list.push({
									image: this.URL(t.image),
									qrurl: this.codeUrl
								})

							})
							this.loading = false
						}
					})

				}
			})

		},
		methods: {
			getImageInfo(src) {
				return new Promise((resolve, reject) => {
					wx.getImageInfo({
						src,
						success: (res) => resolve(res),
						fail: (res) => reject(res)
					})
				});
			},
			fenxiang() {
				let that = this
				uni.showLoading({
					title: '海报生成中'
				})
				//image是画布的底图，后期可以换成自己需要的
				let image = this.list[this.curpoter].image
				//获取系统的基本信息，为后期的画布和底图适配宽高
				uni.getSystemInfo({
					success: function(res) {
						that.windowObj = res
						that.windowObj.ratio = that.windowObj.windowWidth /
							750 //因为小程序是用rpx单位，为了是后期合成的图片更好是适应各个手机屏幕的尺寸，这里先计算出一个比率，后面除以这个比率就可以对各个手机尺寸进行适配了
						that.canvasWidth = that.windowObj.windowWidth / that.windowObj.ratio //设置画布的宽高
						that.canvasHeight = that.windowObj.windowHeight / that.windowObj.ratio
						Promise.all([that.getImageInfo(image), that.getImageInfo(that.page_data.codePng)])
							.then(res => {
								//获取底图和二维码图片的基本信息,通常前端导出的二维码是base64格式的，所以要转成图片格式的才可以获取图片的基本信息			

								let arr = [{
										width: res[0].width,
										height: res[0].height
									},
									{
										width: 386 * that.windowObj.ratio,
										height: 386 * that.windowObj.ratio
									}
								]
								that.ctx.drawImage(res[0].path, 0, (that.windowObj.windowHeight - res[0]
										.height * that.windowObj.ratio) / 2, that.windowObj
									.windowWidth, res[0]
									.height * that.windowObj.ratio);
								that.ctx.drawImage(res[1].path, (that.windowObj.windowWidth - arr[1]
										.width) / 2, (202 * that.windowObj.ratio + (that.windowObj
										.windowHeight - res[0].height * that.windowObj.ratio) / 2),
									arr[1].width, arr[1].height);
								that.ctx.draw(false, function() {
									wx.canvasToTempFilePath({
										x: 0,
										y: 0,
										width: that.windowObj.windowWidth,
										height: that.windowObj.windowHeight,
										destWidth: that.windowObj.windowWidth *
											2, //这里乘以2是为了保证合成图片的清晰度
										destHeight: that.windowObj.windowHeight * 2,
										canvasId: 'shareCanvas',
										fileType: 'jpg', //设置导出图片的后缀名
										success: function(res) {
											// that.page_data.first_post_img = res
											// 	.tempFilePath
											//保存图片到本地
											// console.log()
											// uni.saveImageToPhotosAlbum({
											// 	filePath: that.page_data
											// 		.first_post_img,
											// 	success: function() {
											// 		uni.hideLoading()
											// 		uni.showToast({
											// 			title: '保存成功'
											// 		})
											// 	},
											// })
											uni.hideLoading()
											wx.showShareImageMenu({
												path: res.tempFilePath
											})
										}
									})
								});
							})
					}
				})
			},
			exportPost() {
				let that = this
				uni.showLoading({
					title: '海报生成中'
				})
				//image是画布的底图，后期可以换成自己需要的
				let image = this.list[this.curpoter].image
				//获取系统的基本信息，为后期的画布和底图适配宽高
				uni.getSystemInfo({
					success: function(res) {
						that.windowObj = res
						that.windowObj.ratio = that.windowObj.windowWidth /
							750 //因为小程序是用rpx单位，为了是后期合成的图片更好是适应各个手机屏幕的尺寸，这里先计算出一个比率，后面除以这个比率就可以对各个手机尺寸进行适配了
						that.canvasWidth = that.windowObj.windowWidth / that.windowObj.ratio //设置画布的宽高
						that.canvasHeight = that.windowObj.windowHeight / that.windowObj.ratio
						Promise.all([that.getImageInfo(image), that.getImageInfo(that.page_data.codePng)])
							.then(res => {
								//获取底图和二维码图片的基本信息,通常前端导出的二维码是base64格式的，所以要转成图片格式的才可以获取图片的基本信息			

								let arr = [{
										width: res[0].width,
										height: res[0].height
									},
									{
										width: 386 * that.windowObj.ratio,
										height: 386 * that.windowObj.ratio
									}
								]
								that.ctx.drawImage(res[0].path, 0, (that.windowObj.windowHeight - res[0]
										.height * that.windowObj.ratio) / 2, that.windowObj
									.windowWidth, res[0]
									.height * that.windowObj.ratio);
								that.ctx.drawImage(res[1].path, (that.windowObj.windowWidth - arr[1]
										.width) / 2, (202 * that.windowObj.ratio + (that.windowObj
										.windowHeight - res[0].height * that.windowObj.ratio) / 2),
									arr[1].width, arr[1].height);
								that.ctx.draw(false, function() {
									wx.canvasToTempFilePath({
										x: 0,
										y: 0,
										width: that.windowObj.windowWidth,
										height: that.windowObj.windowHeight,
										destWidth: that.windowObj.windowWidth *
											2, //这里乘以2是为了保证合成图片的清晰度
										destHeight: that.windowObj.windowHeight * 2,
										canvasId: 'shareCanvas',
										fileType: 'jpg', //设置导出图片的后缀名
										success: function(res) {
											that.page_data.first_post_img = res
												.tempFilePath
											//保存图片到本地
											uni.saveImageToPhotosAlbum({
												filePath: that.page_data
													.first_post_img,
												success: function() {
													uni.hideLoading()
													uni.showToast({
														title: '保存成功'
													})
												},
											})
										}
									})
								});
							})
					}
				})
			},


			saveImage() {
				let _this = this
				uni.downloadFile({
					url: this.codeUrl, //仅为示例，并非真实的资源
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								_this.$tn.message.toast('保存成功')
							}
						});
					}
				});
			},
			link() {
				uni.setClipboardData({
					data: this.url,
					success: function() {
						uni.showToast({
							title: '链接复制成功',
							icon: 'none'
						})
					}
				});
			},
			clickbtn(item) {
				this[item.met]()
			}
		}
	}
</script>

<style lang="scss">
	.con {
		padding: 30rpx 0 0;
		position: relative;
		&__box {
			width: 692rpx;
			height: 1239rpx;
			position: relative;

			&__bg {
				width: 692rpx;
				height: 1239rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			&__qr {
				width: 200px;
				height: 200px;
				background: #FFFFFF;
				box-shadow: 0rpx 3rpx 76rpx 0rpx rgba(71, 201, 126, 0.35);
				border-radius: 30rpx;
				position: absolute;
				top: 200rpx;
				margin-left: calc(345rpx - 100px - 40rpx);
				padding: 40rpx;
			}
		}

		.footer {
			height: 162rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;

			&__item {
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 30rpx;
				width: 218rpx;
				height: 99rpx;
				border-radius: 50rpx;
			}

			.item0 {
				background: linear-gradient(180deg, #19caff, #19c3ff, #19caff);
				box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(0, 175, 255, 0.38);
			}

			.item1 {
				box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(255, 108, 0, 0.38);
				background: linear-gradient(269deg, #FF6C00, #FF9100);
			}

			.item2 {
				background: linear-gradient(269deg, #45C47B, #51E38F);
				box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(71, 200, 126, 0.38);
			}
		}
	}

	.qrbox {
		width: 386rpx;
		height: 394rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 76rpx 0rpx rgba(71, 201, 126, 0.35);
		border-radius: 30rpx;
		top: 220rpx;
		position: absolute;
		left: 160rpx;
	}
</style>